<template>
    <div class="userdiv">
        <div class="indexdivtitle">修改信息</div>
        <div class="inuserdiv">昵称:<input v-model="name"/></div>
        <div class="inuserdiv">密码:<input type="password" v-model="psw"/></div>
        <div class="inuserdiv">新密码:<input type="password" v-model="newpsw"/>可填</div>
        <button @click="updateuser()">修改信息</button>
    </div>
    <div class="userdiv">
        <div class="indexdivtitle">注册</div>
        <div class="inuserdiv">昵称:<input  v-model="name"/></div>
        <div class="inuserdiv">邮箱:<input  v-model="email"/></div>
        <div class="inuserdiv">密码:<input type="password" v-model="psw"/></div>
        <button @click="newuser()">注册</button>
    </div>
    <div class="userdiv">
        <div class="indexdivtitle">切换用户</div>
        <div class="inuserdiv">邮箱:<input v-model="email"/></div>
        <div class="inuserdiv">密码:<input type="password" v-model="psw"/></div>
        <button @click="loginuser()">切换</button>
    </div>
    <div class="userdiv">
        <div class="indexdivtitle">当前用户</div>
        <div class="inuserdiv">ID:{{nowuser.id}}</div>
        <div class="inuserdiv">昵称:{{nowuser.name}}</div>
        <div class="inuserdiv">邮箱:{{nowuser.email}}</div>
    </div>
    <div class="userdiv" v-if="gly">
        <div class="indexdivtitle">用户列表</div>
        <div class="userlist" v-for="(item,i) in userlist" :key="i">
            <button style="background: red;" @click="killuser(item.id)">删除</button>
            <div class="userlistinuserdiv">ID:{{item.id}}</div>
            <div class="userlistinuserdiv">昵称:{{item.name}}</div>
            <div class="userlistinuserdiv">邮箱:{{item.email}}</div>
            <div class="userlistinuserdiv">应用个数:{{item.mymodeList.length}}</div>
            <button @click="mymode(item.mymodeList)">查看功能</button>
        </div>
    </div>
    <div class="userdiv" v-if="gly">
        <div class="indexdivtitle">用户功能列表</div>
        <div class="userlist" v-for="(item,i) in mymodeList" :key="i">
            <div class="userlistinuserdiv">名字:{{item.modename}}</div>
            <div class="userlistinuserdiv">描述:{{item.describe}}</div>
            <div class="userlistinuserdiv">跳转URL:{{item.path}}</div>
            <div class="userlistinuserdiv">图标URL:{{item.logo}}</div>
        </div>
    </div>
</template>

<script>
    import {ref, reactive } from "vue";
    export default {
      name: 'User',
      components: {
        },
        setup(){
            let id = ref(0)
            let name = ref('')
            let email = ref('')
            let psw = ref('')
            let newpsw = ref('')
            let nowuser = reactive({})
            let userlist = reactive([])
            let mymodeList = reactive([])
            let gly = ref(false)
            return{
                id,name,email,psw,newpsw,nowuser,userlist,mymodeList,gly
            }
        },
        async mounted(){

            pxmu.loading({
                msg: '正在查询用户信息', //loading信息 为空时不显示文本
                close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                inscroll: true, //模态 不可点击和滚动
            })
            let res = await this.axios.post("/getuser",{})
            //手动关闭
            pxmu.closeload(100);//延时100毫秒关闭 默认0
            console.log(res)
            if (res.data.code !== 200) {
                pxmu.toast(res.data.msg)
            }else{
                this.username = res.data.name
                this.userobj.name = res.data.name
                this.userobj.id = res.data.id
                this.userobj.email = res.data.email
            }

            this.name = this.userobj.name
            this.id = this.userobj.id
            this.email = this.userobj.email
            this.nowuser.name = this.userobj.name
            this.nowuser.id = this.userobj.id
            this.nowuser.email = this.userobj.email

            if (this.id === 1) {
                this.gly = true
                pxmu.loading({
                    msg: '正在执行', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let res = await this.axios.post("/getuserlist",{})
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }else{
                    for (let index = 0; index < res.data.userlist.length; index++) {
                        this.userlist.push(res.data.userlist[index])
                    }
                }
            }
        },
        methods: {
            async loginuser() {
                if(this.psw === '') {
                        pxmu.toast('请输入密码！')
                        return 
                }
                if(this.email === '') {
                        pxmu.toast('请输入邮箱！')
                        return 
                }
                pxmu.loading({
                    msg: '正在执行', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let res = await this.axios.post("/loginuser",{
                    email:this.email,
                    psw:this.md5(this.psw)
                })
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }else{
                    window.location.reload()
                }
            },
            async updateuser() {
                if(this.name === '') {
                        pxmu.toast('请输入昵称！')
                        return 
                }
                if(this.psw === '') {
                        pxmu.toast('请输入密码！')
                        return 
                }
                pxmu.loading({
                    msg: '正在执行', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let newpsw = ''
                if (this.newpsw !== undefined && this.newpsw !== null && this.newpsw !== '') {
                    newpsw = this.md5(this.newpsw)
                }
                let res = await this.axios.post("/updateuser",{
                    id:this.id,
                    email:this.email,
                    psw:this.md5(this.psw),
                    newpsw:newpsw,
                    name:this.name
                })
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }else{
                    window.location.reload()
                }
            },
            async newuser() {
                var reg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/
                var isok= reg.test(this.email)
                if(!isok) {
                        pxmu.toast('邮箱格式不正确，请重新输入！')
                        return 
                }
                if(this.name === '') {
                        pxmu.toast('请输入昵称！')
                        return 
                }
                if(this.psw === '') {
                        pxmu.toast('请输入密码！')
                        return 
                }
                pxmu.loading({
                    msg: '正在执行', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let newpsw = ''
                if (this.newpsw !== undefined && this.newpsw !== null && this.newpsw !== '') {
                    newpsw = this.md5(this.newpsw)
                }
                let res = await this.axios.post("/newuser",{
                    email:this.email,
                    psw:this.md5(this.psw),
                    newpsw:newpsw,
                    name:this.name
                })
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }else{
                    window.location.reload()
                }
            },
            mymode(list){
                this.mymodeList.splice(0, this.mymodeList.length)
                for (let index = 0; index < list.length; index++) {
                    this.mymodeList.push(list[index])
                }
            },
            async killuser(userid) {
                pxmu.loading({
                    msg: '正在执行', //loading信息 为空时不显示文本
                    close: false, // 自动关闭 为false时可在业务完成后调用 pxmu.closeload();手动关闭
                    inscroll: true, //模态 不可点击和滚动
                })
                let res = await this.axios.post("/killuser",{
                    userid:userid,
                })
                //手动关闭
                pxmu.closeload(100);//延时100毫秒关闭 默认0
                console.log(res)
                if (res.data.code !== 200) {
                    pxmu.toast(res.data.msg)
                }else{
                    window.location.reload()
                }
            },
        }
    }
</script>
<style>
.userdiv{
    border: 5px solid gainsboro;
    margin-bottom: 1em;
    justify-content: center;
    display: flex;
    flex-direction:column;
}
.indexdivtitle{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 2em;
    background-color: gainsboro;
    color: rgb(155, 97, 231);
}
.inuserdiv{
    margin-left: auto;
    margin-right: auto;
}
.userlist{
    display: flex;
    flex-direction: row;
}
.userlistinuserdiv{
    border: 1px solid black;
    padding: 0.5em;
}
</style>